<template>
  <div v-drag>
    <div class="mask" @click="closePopup(false)"></div>
    <div v-loading="loading" class="edit_box">
      <div class="box_head">
        <p>录入用户商品</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body">
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>用户：</span>
          <div :class="{'error_border':tip_num===1}">
            <el-select
              v-model="userId"
              filterable
              :popper-append-to-body="false"
              placeholder="请选择用户">
              <el-option
                v-for="(item,index) in userOption"
                :key="index"
                :label="item.remark ? item.wxName + ' ' + '(' + item.remark + ')' : item.wxName"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>

        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>商品：</span>
          <div :class="{'error_border':tip_num===2}">
            <el-select v-model="proId" filterable placeholder="请选择商品" :popper-append-to-body="false">
              <el-option v-for="(item,index) in productOption"
                         :key="index"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>


        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>购买价格：</span>
          <div>
            <el-input v-model.number="price" :class="{'error_border':tip_num===3}" min="0" placeholder="请输入购买价格"
                      type="number" @input="setTip('','')"></el-input>
          </div>
        </div>

        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>抵押数量：</span>
          <div>
            <el-input v-model.number="pledgeNumber" :class="{'error_border':tip_num===4}" min="0" placeholder="请输入抵押数量"
                      type="number" @input="setTip('','')"></el-input>
          </div>
        </div>

        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>抵押金额：</span>
          <div>
            <el-input v-model.number="pledgeMoney" :class="{'error_border':tip_num===5}" min="0" placeholder="请输入抵押金额"
                      type="number" @input="setTip('','')"></el-input>
          </div>
        </div>

        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>最低购买数量：</span>
          <div>
            <el-input v-model.number="minNumber" :class="{'error_border':tip_num===6}" min="0" placeholder="请输入最低购买数量"
                      type="number" @input="setTip('','')"></el-input>
          </div>
        </div>


        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>用户手上商品的总数量：</span>
          <div>
            <el-input v-model.number="productNumber" :class="{'error_border':tip_num===7}" min="0" placeholder="请输入用户手上商品的总数量"
                      type="number" @input="setTip('','')"></el-input>
          </div>
        </div>

        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>历史购买总数量：</span>
          <div>
            <el-input v-model.number="allNumber" :class="{'error_border':tip_num===8}" min="0" placeholder="请输入历史购买总数量"
                      type="number" @input="setTip('','')"></el-input>
          </div>
        </div>

        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>历史使用总数量：</span>
          <div>
            <el-input v-model.number="historyNumber" :class="{'error_border':tip_num===9}" min="0" placeholder="请输入历史使用总数量"
                      type="number" @input="setTip('','')"></el-input>
          </div>
        </div>

        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>销售免费赠予的数量：</span>
          <div>
            <el-input v-model.number="sendNumber" :class="{'error_border':tip_num===10}" min="0" placeholder="请输入销售免费赠予的数量"
                      type="number" @input="setTip('','')"></el-input>
          </div>
        </div>

        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>可用总数量：</span>
          <div>
            <el-input v-model.number="numbers" :class="{'error_border':tip_num===11}" min="0" placeholder="请输入可用总数量"
                      type="number" @input="setTip('','')"></el-input>
          </div>
        </div>


        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>授权使用额度：</span>
          <div>
            <el-input v-model.number="authNumber" :class="{'error_border':tip_num===12}" min="0" placeholder="请输入授权使用额度"
                      type="number" @input="setTip('','')"></el-input>
          </div>
        </div>

        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>已使用授权额度：</span>
          <div>
            <el-input v-model.number="usedAuthNumber" :class="{'error_border':tip_num===12}" min="0" placeholder="请输入已使用授权额度"
                      type="number" @input="setTip('','')"></el-input>
          </div>
        </div>

        <div class="line">
          <span class="lab">是否回收空桶：</span>
          <div>
            <el-radio-group v-model="isReturn">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </div>
        </div>

        <div class="line">
          <span class="lab">是否支付押金：</span>
          <div>
            <el-radio-group v-model="isPayPledgeMoney">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </div>
        </div>

        <p class="error_line">{{ infoTip }}</p>
      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import {getDetail, addData, updateData,entryProduct} from "@/api/data/user/product";
import {getListAll} from "@/api/data/user";
import {listAllData} from "@/api/config/product";

export default {
  props: ['productId'],
  data() {
    return {
      proId: '',
      productOption: [],
      productName: '',
      pledgeMoney: 1,
      pledgeNumber: 1,
      minNumber: 0,
      authNumber: 0,
      price: 0,
      userId: '',
      allNumber:0,
      productNumber:0,
      historyNumber:0,
      sendNumber:0,
      usedAuthNumber:0,
      numbers:0,
      userOption: [],
      isReturn: 1,
      isPayPledgeMoney:1,
      infoTip: '',
      tip_num: '',
      loading: false
    }
  },
  mounted() {
    this.getAllUser();
    this.getAllProduct();
    if (this.productId) {
      this.getDetail();
    }
  },
  methods: {
    getDetail() {
      let that = this;
      this.loading = true;
      getDetail(that.productId).then(res => {
        if (res) {
          that.setData(res);
        }
        that.loading = false;
      }).catch((e) => {
        that.loading = false;
      });
    },

    setData(obj) {
      this.productName = obj.productName ? obj.productName : '';
      this.pledgeMoney = obj.pledgeMoney ? obj.pledgeMoney : 0;
      this.pledgeNumber = obj.pledgeNumber ? obj.pledgeNumber : 0;
      this.price = obj.price ? obj.price :0;
      this.authNumber = obj.authNumber ? obj.authNumber :0;
      this.minNumber = obj.minNumber ? obj.minNumber :0;
      this.proId = obj.productId ? obj.productId : '';
      this.userId = obj.userId ? obj.userId : '';
    },

    // 获取全部用户
    getAllUser() {
      let that = this;
      getListAll().then(res => {
        that.userOption = res ? res : [];
      }).catch((e) => {
        that.userOption = [];
      })
    },

    // 获取全部商品
    getAllProduct() {
      let that = this;
      listAllData({display:1}).then(res => {
        that.productOption = res ? res : [];
      }).catch((e) => {
        that.productOption = [];
      })
    },

    // 确认编辑
    confirmEdit() {
      let data = [{name:this.userId,text:'请选择用户'},
        {name:this.proId,text:'请选择商品'},
        {name:this.price,text:'请输入购买价格'},
        {name:this.pledgeNumber,text:'请输入抵押数量'},
        {name:this.pledgeMoney,text:'请输入抵押金额'},
        {name:this.minNumber,text:'请输入最低购买数量'},
        {name:this.productNumber,text:'请输入用户手上商品的总数量'},
        {name:this.allNumber,text:'请输入历史购买总数'},
        {name:this.historyNumber,text:'请输入历史使用总数量'},
        {name:this.sendNumber,text:'请输入销售免费赠予的数量'},
        {name:this.authNumber,text:'请输入授权使用额度'},
        {name:this.usedAuthNumber,text:'请输入已使用授权额度'}]
      let dataLength = data.length;
      for(let i = 0 ;i < dataLength;i++) {
        if(data[i].name === '') {
          this.setTip(i + 1,data[i].text);
          return;
        }
        else {
          if(i == dataLength - 1) {
            this.sendInfo();
          }
        }
      }

    },

    sendInfo() {
      let that = this;
      if(Boolean(parseInt(that.authNumber) < parseInt(that.usedAuthNumber))) {
        that.setTip(12,'授权使用额度不得小于已经使用授权使用额度！')
        return;
      }
      if(that.authNumber%1 !== 0 || that.usedAuthNumber%1 !== 0) {
        that.setTip(12,'额度为整数！')
        return;
      }
      that.loading = true;
      let data = {
        productId: that.proId,
        userId: that.userId,
        allNumber:that.allNumber,
        authNumber:that.authNumber,
        historyNumber :that.historyNumber,
        isPayPledgeMoney:that.isPayPledgeMoney,
        isReturn:that.isReturn,
        minNumber:that.minNumber,
        numbers:that.numbers,
        pledgeNumber:that.pledgeNumber,
        pledgeMoney:that.pledgeMoney,
        price:that.price,
        productNumber :that.productNumber,
        sendNumber :that.sendNumber,
        usedAuthNumber:that.usedAuthNumber
      }
      // if (that.productId) {
      //   data.id = that.productId;
      //   updateData(JSON.stringify(data)).then(response => {
      //     that.closePopup(true);
      //     that.$message.success({
      //       message: '操作成功！',
      //       duration: 1500
      //     });
      //     that.loading = false;
      //   }).catch((e) => {
      //     that.loading = false;
      //   });
      // } else {
      entryProduct(data).then(response => {
        that.closePopup(true);
        that.$message.success({
          message: '录入成功！',
          duration: 1500
        });
        that.loading = false;
      }).catch((e) => {
        that.loading = false;
      });
      // }
    },

    setTip(num, text) {
      this.tip_num = num;
      this.infoTip = text
    },

    // 关闭
    closePopup(refresh) {
      this.$emit('listenToChild', {refresh: refresh})
    }
  },
  watch:{
    proId(newP,oldP){
      this.productOption.forEach((item,index) => {
        if(this.proId == item.id) {
          this.price = item.price;
        }
      })
    }
  }
}
</script>

<style scoped>
.half_box div {
  width: 124px !important;
}
.line .lab {
  width:200px !important;
}
.half_box .second_lab {
  width: 75px;
}


</style>
